<template>
  <div>
    A

    <button @click="handleClick">调用vuex中写的接口</button>
    <button @click="handleMutaionClick">调用vuex中mutaion写的接口</button>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  data() {
    return {}
  },
  created() {
    // this.$store.commit('SET_PAGEA_LIST', this.list)
  },
  methods: {
    ...mapMutations(['SET_TEST_MSG']),
    ...mapActions(['fetch_list']),
    handleMutaionClick() {
      // 调用vuex:mutation中的函数
      this.SET_TEST_MSG('hello Vue')
      // this.$store.commit('SET_TEST_MSG', 'hello Vue')
    },
    handleClick() {
      // 调用vuex:action中的函数,最终还是要给mutaion函数
      this.fetch_list({ name: 'devin' })
      // this.$store.dispatch('fetch_list', { name: 'devin' })
    },
  },
}
</script>

<style></style>
